<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 3px dashed #ccc;
            padding: 20px;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app" class="box">
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <br><br>
        <p>obj.info:{{ obj.info }}</p>
        <input type="text" v-model="obj.info">
        <br><br>
        <!-- 
            因为 绑定的 obj参数为对象数据，依据JS的规则传递的数据为该对象的 地址数据
            在子组件中 props 拦截到也是该对象的 地址，按照vue的规则，只有props拦截的值（地址）
            未发生变化就vue理解为该数据未发生变化；
            但JS的地址传递，实际上只是一个指向关系传递，对指向堆中数据进行修改，是不会导致变量地址变化

            使用JS完成组件数据双向共享，虽然简单，但违背单向数据流概念  => 开发中谨慎使用
                ==> 目前市面上所有基于vue开发的ui组件库，都使用了该功能完成组件数据的双向共享
                ==> 目的为了降低封装组件的使用难度
         -->
        <comp-a :msg=" msg " :obj="obj"></comp-a>
    </div>

    <script type="text/x-template" id="comp-a">
        <div class="box">
            <p>msg:{{ msg }}</p>
            <input type="text" v-model="msg">
            <br><br>
            <p>obj.info:{{ obj.info }}</p>
            <input type="text" v-model="obj.info">
        </div>
    </script>

    <script>
        Vue.component("CompA", {
            template:"#comp-a",
            props:{
                msg:{},
                obj:{}
            }
        })
        new Vue({
            el:"#app",
            data:{
                msg:"测试数据msg",
                obj:{
                    info:"测试数据info"
                }
            }
            
        })
    </script>
</body>
</html>